<template>

  <!-- 管理员-搜索表单主体 -->
  <el-form id="admin-task-management-from-content" ref="formRef" :inline="true" :model="formInline"
    class="demo-form-inline ">
    <!-- 管理员-搜索表单输入框父级 -->
    <div class="" id="admin-task-management-from-item-input-content-parent">
      <!-- 管理员-搜索任务名称子项父级 -->
      <el-form-item id="admin-task-management-from-item-input-task-name-parent" label="任务名称" prop="taskName">
        <!-- 管理员-搜索任务名称输入框 -->
        <el-input id="admin-task-management-from-input-task-name" v-model="formInline.taskName" placeholder="任务名称"
          clearable />
      </el-form-item>
      <!-- 管理员-搜索任务内容子项父级 -->
      <el-form-item id="admin-task-management-from-item-input-task-content-parent" label="任务内容" prop="taskContent">
        <!-- 管理员-搜索任务内容输入框 -->
        <el-input id="admin-task-management-from-input-task-content" v-model="formInline.taskContent" placeholder="任务内容"
          clearable />
      </el-form-item>
      <!-- 管理员-搜索任务状态子项父级 -->
      <el-form-item id="admin-task-management-from-item-input-task-status-parent" label="状态选项">
        <!-- 管理员-搜索任务状选择框-->
        <el-select id="admin-task-management-from-select-task-status" clearable v-model="formInline.taskStatus"
          placeholder="任务状态">
          <!-- 管理员-选择任务状态下拉框 进行中（待办）选项  -->
          <el-option id="admin-task-management-from-select-task-status-0" label="进行中（待办）" value="进行中（待办）" />
          <!-- 管理员-选择任务状态下拉框 已完成（已办）选项  -->
          <el-option id="admin-task-management-from-select-task-status-1" label="已完成（已办）" value="已完成（已办）" />
          <!-- 管理员-选择任务状态下拉框 已到期（未完成）选项  -->
          <el-option id="admin-task-management-from-select-task-status-2" label="已到期（未完成）" value="已到期（未完成）" />
        </el-select>
      </el-form-item>
      <!-- 管理员-选择任务截止时间子项父级 -->
      <el-form-item id="admin-task-management-from-item-select-task-date-parent" label="起止时间" prop="taskDates">
        <!-- 管理员-选择任务截至时间组件主体 -->
        <el-date-picker id="admin-task-management-from-item-select-task-date-content" v-model="formInline.taskDates"
          type="datetimerange" range-separator="至" format="YYYY-MM-DD HH:mm:ss" value-format="x"
          start-placeholder="开始日期" end-placeholder="结束日期" />
      </el-form-item>
    </div>
    <!-- 管理员-查询按钮 重置按钮  批量删除 父级 -->
    <div class="" id="admin-task-management-from-item-btn-content-parent">
      <!-- 管理员-查询按钮表单子项父级 -->
      <el-form-item id="admin-task-management-from-item-search-btn-parent">
        <!-- 管理员-查询按钮 -->
        <el-button id="admin-task-management-from-item-search-btn" type="primary" @click="onSubmit"
          :disabled="TaskManagementStore.searchButtonDisabdled">查询</el-button>
      </el-form-item>
      <!-- 管理员-重置按钮表单子项父级 -->
      <el-form-item id="admin-task-management-from-item-reset-btn-parent">
        <!-- 管理员-重置按钮 -->
        <el-button id="admin-task-management-from-item-reset-btn" type="default" @click="onReset(formRef)"
          :disabled="TaskManagementStore.resetButtonDisabdled">重置</el-button>
      </el-form-item>
      <!-- 管理员-批量删除表单子项父级 -->
      <el-form-item id="admin-task-management-from-item-delete-list-btn-parent">
        <!-- 管理员-批量删除表按钮 -->
        <el-button id="admin-task-management-from-item-delete-list-btn" type="primary" @click="onDeleteAll"
          :disabled="TaskManagementStore.isSomeIngChecked">批量删除</el-button>
      </el-form-item>
    </div>
  </el-form>
  <!-- 全部任务表格数据显示主体父级 -->
  <div style="height: 500px" id="admin-task-management-table-content-parent" class="">
    <!-- 表格的大小兼容父级组件  -->
    <el-auto-resizer id="admin-task-management-table-auto-resizer-content-parent">
      <!-- 任务的默认插槽父级 -->
      <template id="admin-task-management-table-slot-default-content-parent" #default="{ height, width }">
        <!-- 虚拟列表主体 -->
        <el-table-v2 id="admin-task-management-table-v2-contet" :columns="getColumns(router, TaskManagementStore)"
          :data="TaskManagementStore.adminWorksList" :width="width" :height="height" fixed>
          <!-- 虚拟列表的覆盖内容主体父级 -->
          <template id="admin-task-management-table-v2-contet-slot-overlay-content-parent" #overlay
            v-if="TaskManagementStore.showMask">
            <!-- 虚拟列表的覆盖内容遮罩主体 -->
            <div id="admin-task-management-table-v2-contet-slot-overlay-content-loading-mask-content"
              class="el-loading-mask" style="display: flex; align-items: center; justify-content: center">
              <!-- 遮罩主体内的图标父级 -->
              <el-icon id="admin-task-management-table-v2-contet-slot-overlay-content-icon" class="is-loading"
                color="var(--el-color-primary)" :size="26">
                <!-- 遮罩主体内的加载图标 -->
                <Loading id="admin-task-management-table-v2-contet-slot-overlay-content-icon-loading" />
              </el-icon>
            </div>
          </template>
        </el-table-v2>
      </template>
    </el-auto-resizer>
  </div>
  <!-- 分页选择容器父级 -->
  <el-pagination id="admin-task-management-pagination-content" v-model:current-page="TaskManagementStore.currentPage"
    v-model:page-size="TaskManagementStore.pageSize" :page-sizes="[10, 20, 30, 40]" :size="size"
    :disabled="TaskManagementStore.pageButtonDisabdled" :background="background" layout="sizes, prev, pager, next"
    :total="TaskManagementStore.adminWorksListCopy.length"
    class="taskManagement-pagination " @size-change="handleSizeChange"
    @current-change="handleCurrentChange" />


  <!-- 991屏幕以下的显示内容 hidden-md-and-up-->
     <!-- 下拉刷新 -->

</template>
<script setup>

import { reactive, h, ref, unref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElCheckbox, ElMessageBox, ElMessage } from 'element-plus'
import { useTaskManagementStore } from "@/store/taskManagement"
import { getColumns } from "../store/taskManagement/js/column.js"
import img from "../assets/images/office/default.png"
import {
  ElButton,
  ElIcon,
  ElTag,
  ElTooltip,
  TableV2FixedDir,
  dayjs
} from 'element-plus'
const TaskManagementStore = useTaskManagementStore()
const router = useRouter()


const text =
'似水流年是一个人所有的一切，只有这个东西，才真正归你所有。其余的一切，都是片刻的欢娱和不幸，转眼间就已跑到那似水流年里去了。';
const show = ref(false);
const checked1 =ref(false)
const checked =ref(false)
const offset = ref({ x: 200, y: 400 });
    const showPopup = () => {
      show.value = true;
    };
const func = ()=>{

}
const activeNames = ref(['1']);
const loading = ref(false);

    const value = ref('');



// onUnmounted(()=>{
//   // 清空分页
//   TaskManagementStore.clearPageData()
// })
onMounted(() => {
  TaskManagementStore.pageSize = 10
  TaskManagementStore.currentPage = 1
  TaskManagementStore.getWorksList()
})


const formRef = ref(null)




const size = ref('default')


const background = ref(false)

// 查询数据
const formInline = reactive({
  taskName: "",
  taskContent: "",
  taskStatus: "",
  taskDates: [],
})

// 重置
const onReset = (formRef) => {
  if (!formRef) return

  formRef.resetFields()

  // 清空所有的条件，获取全部任务
  TaskManagementStore.getWorksList()
}

// 
const onDeleteAll = () => {
  ElMessageBox.confirm('确定删除吗?')
    .then(() => {
      let arr = []
      // 获取id
      arr = TaskManagementStore.adminWorksList.filter((val) => val.checked).map((val) => val.id)
      // 批量删除
      TaskManagementStore.deleteTasks({ taskIds: arr })
    })
    .catch(() => {
      ElMessage({
        message: '已取消',
        type: 'warning',
      })
    })
}
// 页数改变 获取分页数据
const handleCurrentChange = (val) => {
  TaskManagementStore.showMask = true//显示遮罩
  TaskManagementStore.searchButtonDisabdled = true//禁用查询
  TaskManagementStore.resetButtonDisabdled = true//禁用重置
  TaskManagementStore.pageButtonDisabdled = true//禁用分页
  let obj = TaskManagementStore.pageNumber
  TaskManagementStore.adminWorksList = TaskManagementStore.adminWorksListCopy.slice(obj.pageStart, obj.pageStart + obj.pageEnd)

  setTimeout(() => {
    TaskManagementStore.showMask = false//取消显示遮罩
    TaskManagementStore.searchButtonDisabdled = false//取消禁用查询
    TaskManagementStore.resetButtonDisabdled = false//取消禁用重置
    TaskManagementStore.pageButtonDisabdled = false//取消禁用分页
  }, 1100)
}
// 页面的数据大小改变 获取分页数据
const handleSizeChange = (val) => {
  // 直接调用
  handleCurrentChange()
}



// 查询
const onSubmit = () => {

  let tagTypes = ["进行中（待办）", "已完成（已办）", "已到期（未完成）"]


  let arr = []
  let allTaskList = TaskManagementStore.allTaskList || []



  TaskManagementStore.showMask = true//显示遮罩
  TaskManagementStore.searchButtonDisabdled = true//禁用查询
  TaskManagementStore.resetButtonDisabdled = true//禁用重置
  TaskManagementStore.pageButtonDisabdled = true//禁用分页

  // 判断任务名称是否有值
  if (formInline.taskName != undefined && (formInline.taskName + "").trim().length && formInline.taskName != null) {
    arr = allTaskList.filter((val) => val.title.indexOf(formInline.taskName) != -1)
  }


  // 判断内容是否有值
  if (formInline.taskContent != undefined && (formInline.taskContent + "").trim().length && formInline.taskContent != null) {
    if (arr.length > 0) {
      arr = arr.filter((val) => val.content.indexOf(formInline.taskContent) != -1)
    } else if (arr.length == 0) {
      arr = allTaskList.filter((val) => val.content.indexOf(formInline.taskContent) != -1)
    }
  }

  // 判断状态是否有值
  if (formInline.taskStatus != undefined && (formInline.taskStatus + "").trim().length && formInline.taskStatus != null) {
    if (arr.length > 0) {
      arr = arr.filter((val) => tagTypes[val.workStatusId].indexOf(formInline.taskStatus) != -1)
    } else if (arr.length == 0) {
      arr = allTaskList.filter((val) => tagTypes[val.workStatusId].indexOf(formInline.taskStatus) != -1)
    }
  }


  // 判断起止时间是否有值
  if (formInline.taskDates != undefined && Object.prototype.toString.call(formInline.taskDates) == '[object Array]' && formInline.taskDates.length > 1) {
    let startTime = "";
    let endTime = "";

    startTime = dayjs(dayjs(formInline.taskDates[0] * 1).format('YYYY-MM-DD HH:mm:ss'));
    endTime = dayjs(dayjs(formInline.taskDates[1] * 1).format('YYYY-MM-DD HH:mm:ss'));
    if (arr.length > 0) {
      arr = arr.filter((val) => isTimeInRange(val.createTime, startTime, endTime))
      arr = arr.filter((val) => isTimeInRange(val.endTime, startTime, endTime))
    } else if (arr.length == 0) {
      arr = allTaskList.filter((val) => isTimeInRange(val.createTime, startTime, endTime))
      arr = allTaskList.filter((val) => isTimeInRange(val.endTime, startTime, endTime))
    }


  } else if (formInline.taskDates != undefined && Object.prototype.toString.call(formInline.taskDates) == '[object Array]' && formInline.taskDates.length > 0) {
    let startTime = "";
    if (formInline.taskDates[0].length > 0) {
      startTime = dayjs(dayjs(formInline.taskDates[0] * 1).format('YYYY-MM-DD HH:mm:ss'));

      if (arr.length > 0) {
        arr = arr.filter((val) => isTimeInRange(val.createTime, startTime, ""))
      } else if (arr.length == 0) {
        arr = allTaskList.filter((val) => isTimeInRange(val.createTime, startTime, ""))
      }

    } else if (formInline.taskDates[1].length > 0) {
      let endTime = "";
      endTime = dayjs(dayjs(formInline.taskDates[1] * 1).format('YYYY-MM-DD HH:mm:ss'));
      if (arr.length > 0) {
        arr = arr.filter((val) => isTimeInRange(val.endTime, "", endTime))
      } else if (arr.length == 0) {
        arr = allTaskList.filter((val) => isTimeInRange(val.endTime, "", endTime))
      }

    }
  }
  // 更新数据
  let obj = TaskManagementStore.pageNumber

  TaskManagementStore.adminWorksList = arr.slice(obj.pageStart, obj.pageStart + obj.pageEnd)
  TaskManagementStore.adminWorksListCopy = arr


  // 当前没有条件符合，重新请求数据
  if (
    (formInline.taskName == "" || formInline.taskName == undefined) &&
    (formInline.taskContent == "" || formInline.taskContent == undefined) &&
    (formInline.taskStatus == "" || formInline.taskStatus == undefined) &&
    (formInline.taskDates == undefined || (Object.prototype.toString.call(formInline.taskDates) == '[object Array]' && formInline.taskDates.length == 0))) {

    TaskManagementStore.getWorksList()
  }


  setTimeout(() => {
    TaskManagementStore.showMask = false//取消显示遮罩
    TaskManagementStore.searchButtonDisabdled = false//取消禁用查询
    TaskManagementStore.resetButtonDisabdled = false//取消禁用重置
    TaskManagementStore.pageButtonDisabdled = false//取消禁用分页

    arr = []//筛选任务数据集合
    allTaskList = []//全部任务数据集合
  }, 1100)
}
// 判断是否在区间内，包括开始结束时间
function isTimeInRange(checkTime, start, end) {
  const time = dayjs(dayjs(checkTime * 1).format('YYYY-MM-DD HH:mm:ss'))
  return time.isSame(start) || time.isSame(end) || (time.isAfter(start) && time.isBefore(end));
}
</script>
<style lang="less" scoped>
@media (min-width: 992px) {
  .demo-form-inline {
    display: flex;
  }
}

@media (max-width: 992px) {
  .demo-form-inline {
    display: flex;
    flex-direction: column;
  }
}


.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

.taskManagement-pagination {
  margin-top: 10px;
  justify-content: flex-end
}

/deep/ .tagStatus {
  padding: 0;
  width: 12px !important;
  height: 12px !important;
  margin-right: 10px;
}
</style>